<template>
    <view class="content" :style="{ height: windowHeight + 'px' }">
        <scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
            :refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">

            <view class="recommend_content_all">
                <view class="bottoms_items" v-for="(item, index) in list" :key="index" @click="toClick(item.id)">
                    <image :src="item.image" mode="widthFix"></image>
                    <view class="name">
                        {{ item.name }}
                    </view>
                    <view class="bottom">
                        <view class="price">
                            {{ item.price }}
                        </view>
                        <view class="des">
                            <view class="title"
                                :style="{ backgroundColor: item.price == '0.00' ? 'rgba(55,147,245)' : 'red' }">
                                {{ item.price == '0.00' ? '积分兑换' : '积分折扣' }}
                            </view>
                            <view class="salesQuantity">
                                已拼{{ item.salesQuantity || 0 }}单
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="zanwu" v-if="list.length == 0">暂无数据</view>
            <u-loadmore v-if="list.length != 0" fontSize="25" :status="status" />
        </scroll-view>
    </view>
</template>

<script>
import config from '@/config/config.js'
import { systemInfo } from '../../utils/mixin'
import {
    mallProductList
} from '@/api/index.js'
export default {
    components: {},
    mixins: [systemInfo],
    data() {
        return {
            list: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            status: 'loadmore',
            triggered: false,
            downRefresh: false,
            pageCount: 0,
            configId: ''
        }
    },
    async onLoad(options) {
        // 状态栏高度
        this.getSystemInfo();

        uni.setNavigationBarTitle({
            title: options.title
        })

        this.configId = options.id

        this.triggered = true;
        this.downRefresh = true
        this.queryParams.pageNum = 1
        this.list = []
        this.getcollectList()
    },
    methods: {

        toClick(id) {
			uni.navigateTo({
				url: "/subpackage3/shop/productDetail?id=" + id
			})
		},


        async getcollectList() {
            const res = await mallProductList({
                ...this.queryParams,
                configId: this.configId
            })
            this.pageCount = res.total
            res.rows.forEach(element => {
                element.image = config.pic_prefixs + element.image
            });
            //停止加载中
            this.triggered = false;
            this.downRefresh = false
            //处理完逻辑停止刷新
            uni.stopPullDownRefresh();
            if (this.list.length >= this.pageCount) {
                this.status = 'nomore';
            } else {
                let arr = [...this.list, ...res.rows]
                this.list = arr
                if (res.rows.length < 10) {
                    this.status = 'nomore';
                }
            }
        },

        //触底加载
        lowerBottom() {
            if (this.queryParams.pageNum < this.pageCount) {
                if (!this.downRefresh) {
                    this.downRefresh = true
                    this.status = 'loading';
                    this.queryParams.pageNum += 1
                    this.getcollectList()
                }
            }
        },
        onRefresh() {
            this.triggered = true;
            this.downRefresh = true
            this.queryParams.pageNum = 1
            this.list = []
            this.getcollectList()
        },
        onRestore() {
            this.triggered = false; // 需要重置
        },
    }
}
</script>

<style lang="less" scoped>
.content {
    background-color: rgb(245, 245, 245);
    width: 100%;
    box-sizing: border-box;
    text-align: center;

    .box_scroll {
        height: calc(100% - 60rpx);
        width: calc(100% - 60rpx);
        margin: 0 auto 0;
        background-color: #fff;
        border-radius: 15px;
        padding: 30rpx;
        box-sizing: border-box;

        .recommend_content_all {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }


    .bottoms_items {
        width: calc(50% - 20rpx);
        margin-bottom: 20rpx;

        image {
            width: 100%;
        }

        .name {
            width: 100%;
            text-align: left;
            font-size: 30rpx;
            overflow: hidden; // 溢出的内容隐藏
            text-overflow: ellipsis; // 溢出的部分用省略号...显示
            -webkit-line-clamp: 2; // 行数
            display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 
            -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
        }

        .bottom {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .price {
                font-size: 30rpx;
                color: red;
            }

            .des {
                display: flex;
                align-items: center;
                font-size: 20rpx;
                color: #fff;
                height: 40rpx;
                line-height: 40rpx;

                .title {
                    text-align: center;
                    padding: 0 5rpx;
                    border-top-left-radius: 10rpx;
                    border-bottom-left-radius: 10rpx;
                }

                .salesQuantity {
                    color: #b3adad;
                    text-align: center;
                    padding: 0 5rpx;
                    background-color: rgba(235, 235, 235);
                    border-top-right-radius: 10rpx;
                    border-bottom-right-radius: 10rpx;
                }
            }
        }

        .zanwu {
            font-size: 30rpx;
            color: #b3adad;
            text-align: center;
            margin-top: 20px;
            
        }
    }
}
</style>
